import React from 'react';
import './StaticMapComponent.css';

const StaticMapComponent = ({ longitude, latitude, address, companyName }) => {
  // 使用百度地图静态API作为备用方案（暂时注释掉，因为未使用）
  // const baiduMapUrl = `https://api.map.baidu.com/staticimage/v2?ak=your-baidu-key&center=${longitude},${latitude}&width=600&height=400&zoom=15&markers=${longitude},${latitude}&markerStyles=l,A`;

  return (
    <div className="static-map-container">
      <div className="map-placeholder">
        <div className="map-icon">🗺️</div>
        <h4>{companyName || '公司位置'}</h4>
        <p className="address">{address || '北京通州区金融街武夷融御4号楼901'}</p>
        <p className="coordinates">坐标: {longitude || '116.397428'}, {latitude || '39.90923'}</p>
        <div className="map-actions">
          <a 
            href={`https://uri.amap.com/marker?position=${longitude || '116.397428'},${latitude || '39.90923'}&name=${encodeURIComponent(companyName || '公司位置')}`}
            target="_blank"
            rel="noopener noreferrer"
            className="map-link"
          >
            📍 在高德地图中查看
          </a>
        </div>
      </div>
    </div>
  );
};

export default StaticMapComponent;
